<template>
    <div class="login-template">
        <img class="logo" :src="Logo" alt="LOGO" />
        <div class="top-container">
            <div class="item" @click="openUserManual"><img :src="Shouce" alt="数据手册" />数据手册</div>
            <a-popover placement="bottomRight">
                <template #content>
                    <q-r-code :text="downloadUrl" />
                </template>
                <div class="item"><img :src="Download" alt="APP下载" />APP下载</div>
            </a-popover>
        </div>
        <div class="login-container">
            <div class="login-bg">
                <img :src="bgImage" alt="登陆图" />
            </div>
            <div class="login-form">
                <h3 class="title">
                    欢迎登录{{ settingStore.getName }}
                    <span class="line"></span>
                </h3>
                <a-form :model="formState" autocomplete="off" @finish="handleFinish">
                    <a-form-item name="username" :rules="rules.username">
                        <a-input v-model:value="formState.username" placeholder="请输入用户名" size="large" :maxlength="100">
                            <template #prefix>
                                <user-outlined class="icon" />
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="password" :rules="rules.password">
                        <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large" :maxlength="100">
                            <template #prefix>
                                <lock-outlined class="icon" />
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item class="captcha" name="captcha" :rules="rules.captcha">
                        <a-input v-model:value="formState.captcha" class="captcha-input" placeholder="请输入验证码" size="large" :maxlength="4">
                            <template #prefix>
                                <safety-outlined class="icon" />
                            </template>
                        </a-input>
                        <img v-if="imgBase64" class="img" :src="imgBase64" @click="handleCaptcha" />
                    </a-form-item>
                    <div class="change-container" @click="handleCaptcha">
                        <span class="change"><img :src="Refresh" alt="刷新" />换一张</span>
                    </div>
                    <a-checkbox v-model:checked="remember" class="remember-me">记住密码</a-checkbox>
                    <a-form-item>
                        <a-button class="login-btn" type="primary" html-type="submit" size="large">
                            <template v-if="loading" #icon>
                                <LoadingOutlined />
                            </template>
                            {{ loading ? '登录中...' : '登录' }}
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { UserOutlined, LockOutlined, SafetyOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { getCaptcha, login, getLatest } from '/@/api/Iframe/login.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { PasswordRegular } from '@iframe/tools/utils/regular'
import { useTokenStore, useUserinfoStore, useSettingStore, usePermissionStore, useTabsStore, useBusinessStore } from '@iframe/tools/store'
import { putSession, getSession, removeSession } from '@iframe/tools/utils/SessionUtils'
import { LOGIN_INFO } from '@iframe/tools/config/SystemConfig'
import { getSetting } from '/@/api/Iframe/Setting'
import { QRCode, notice } from '@iframe/tools/components'
import Logo from '/@/assets/image/login/logo.png'
import Shouce from '/@/assets/image/login/icon-shouce.png'
import Download from '/@/assets/image/login/icon-app-download.png'
import Refresh from '/@/assets/image/login/icon-refresh.png'

const tokenStore = useTokenStore()
const tabsStore = useTabsStore()
const userinfoStore = useUserinfoStore()
const settingStore = useSettingStore()
const permissionStore = usePermissionStore()
const businessStore = useBusinessStore()

const router = useRouter()
let imgBase64 = ref('')
const downloadUrl = ref('')
const remember = ref(false)
const loading = ref(false)

const bgImage = `/api/${import.meta.env.IFRAME_CONTEXT_PATH}/sys/project/background`

const formState = reactive({ username: '', password: '', captcha: '', checkKey: '' })
const rules = reactive({
    username: [{ required: true, message: '请输入用户名' }],
    password: [
        { required: true, message: '请输入密码' },
        { pattern: PasswordRegular, message: '密码必须以字母开头，包括数字的8-20位字符串' }
    ],
    captcha: [{ required: true, message: '请输入验证码' }]
})

tokenStore.clearToken()
userinfoStore.clearUserinfo()
tabsStore.clear()
permissionStore.clear()
businessStore.clear()
const loginString = getSession(LOGIN_INFO)

if (loginString) {
    const loginInfo = JSON.parse(loginString)
    remember.value = loginInfo.remember
    if (loginInfo.remember) {
        formState.username = loginInfo.username
        formState.password = loginInfo.password
    }
}
const handleCaptcha = () => {
    getCaptcha({ key: formState.checkKey }).then(result => {
        if (result.code === SUCCESS_CODE) {
            formState.checkKey = result.data.uuid
            imgBase64.value = result.data.img
        }
    })
}
handleCaptcha()

const loadSetting = () => {
    getSetting().then(result => {
        if (result.code === SUCCESS_CODE) {
            settingStore.setSetting(result.data)
        }
    })
}

const loadVersion = () => {
    getLatest().then(result => {
        if (result.code === SUCCESS_CODE) {
            downloadUrl.value = result.data.url
        }
    })
}

const handleFinish = () => {
    if (remember.value === true) {
        putSession(
            LOGIN_INFO,
            JSON.stringify({
                remember: remember.value,
                username: formState.username,
                password: formState.password
            })
        )
    } else {
        removeSession(LOGIN_INFO)
    }
    if (loading.value) {
        return
    }
    loading.value = true
    login(formState)
        .then(result => {
            if (result.code === SUCCESS_CODE) {
                tokenStore.setToken(result.data.token)
                userinfoStore.setUserinfo({
                    id: result.data.sysUser.id,
                    username: result.data.sysUser.username,
                    realname: result.data.sysUser.realname,
                    sysRoleId: result.data.sysUser.sysRoleId,
                    avatar: result.data.sysUser.avatar,
                    isAdmin: result.data.sysUser.isAdmin,
                    sysDepartId: result.data.sysUser.sysDepartId
                })
                router.push(import.meta.env.IFRAME_HOME_URL)
            } else if (result.code === 11000 || result.code === 12000) {
                notice.warning(result.message)
                formState.captcha = ''
                handleCaptcha()
            }
            loading.value = false
        })
        .catch(err => {
            loading.value = false
            console.error(err)
        })
}

const openUserManual = () => {
    window.open('/manual.html')
}

loadVersion()
loadSetting()
</script>
<style lang="less" scoped>
.login-template {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(0% 65% at 41% 50%, #ffffff 0%, #f7f9ff 39%, #f2f5ff 100%);

    .logo {
        width: 280px;
        height: 100px;
        position: absolute;
        left: 120px;
        top: 80px;
    }

    .top-container {
        position: absolute;
        top: 40px;
        right: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .item {
            display: flex;
            justify-content: right;
            img {
                margin-right: 3px;
            }
            width: 100px;
            height: 20px;
            line-height: 20px;
            cursor: pointer;
            color: #333333;
            font-size: 14px;
        }
    }

    .login-container {
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        .login-bg {
            width: 714px;
            img {
                width: 714px;
                height: 500px;
            }
        }
        .login-form {
            width: 520px;
            height: 500px;
            margin-left: 200px;
            background: #ffffff;
            box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06);
            border-radius: 16px;
            opacity: 0.96;
            backdrop-filter: blur(12px);
            padding: 44px 64px 0 56px;
            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                font-size: 22px;
                color: rgba(0, 0, 0, 0.9);
                line-height: 22px;
                text-align: left;
                font-style: normal;
                .line {
                    display: block;
                    width: 86px;
                    height: 3px;
                    background: #4764e6;
                    border-radius: 2px;
                    margin-top: 12px;
                    margin-bottom: 44px;
                }
            }
            :deep(.ant-input-affix-wrapper) {
                background: #f7f8fa;
                border-color: transparent;
            }
            :deep(.ant-input-affix-wrapper:hover) {
                border-color: #4764e6;
            }
            :deep(.ant-input-affix-wrapper-status-error) {
                border-color: #ff4d4f;
            }
            :deep(.ant-input-affix-wrapper-status-error:hover) {
                border-color: #ff4d4f;
            }
            .captcha {
                .captcha-input {
                    width: 260px;
                    margin-right: 10px;
                }
                .img {
                    cursor: pointer;
                }
            }
            .change-container {
                position: relative;
                .change {
                    position: absolute;
                    top: -15px;
                    right: 5px;
                    cursor: pointer;
                    font-size: 12px;
                    color: #4764e6;
                }
            }
            .remember-me {
                margin-top: 15px;
            }
            .login-btn {
                margin-top: 30px;
            }
            :deep(.ant-input) {
                background: #f7f8fa;
                height: 28px;
            }
        }
    }

    //.login-container {
    //    border-radius: 6px;
    //    position: absolute;
    //    right: 250px;
    //    width: 490px;
    //    height: 450px;
    //    top: 50%;
    //    margin-top: -225px;
    //    padding: 45px 50px 0;
    //
    //    .title {
    //        margin: 0 auto 30px auto;
    //        text-align: center;
    //        width: 100%;
    //        height: 40px;
    //        line-height: 40px;
    //        font-size: 25px;
    //        font-weight: bold;
    //        color: #3360c2;
    //    }
    //
    //    .icon {
    //        color: rgba(0, 0, 0, 0.25);
    //    }
    //
    //    .img {
    //        cursor: pointer;
    //    }
    //
    //    :deep(.ant-input-group-addon) {
    //        border: none;
    //        background-color: transparent;
    //    }
    //    :deep(.ant-checkbox-wrapper-checked) {
    //        color: #1890ff;
    //    }
    //}

    .login-btn {
        margin-top: 30px;
        width: 100%;
    }
}
</style>
